<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<body>
<script type="text/javascript">
  var answers = {
    "2" : [
      new Element("He", "Helium", 2, 3.01),
      new Element("He", "Helium", 4, 2.04),
      s2e["He"],
      new Element("He", "Helium", 3, 4.02)
    ],
    "3" : [
      new Element("Li", "Lithium", 7, 5.08),
      s2e["Li"],
      new Element("Li", "Lithium", 6, 4.07),
      new Element("Li", "Lithium", 3, 6.12)
    ],
    "4" : [
      new Element("Be", "Lithium", 8, 7.08),
      new Element("Be", "Lithium", 4, 5.07),
      new Element("Be", "Lithium", 9, 5.02),
      s2e["Be"]
    ]
  };

  var z = 16;

  function PeriodicSquaresPreTest(div) {
    this.div = div;
    this.protons = Number(div.attr("protons"));
    this.neutrons = Number(div.attr("neutrons"));
    this.selected_square = null;
    this.mouse = {};
  }

  PeriodicSquaresPreTest.prototype = {
    start:function () {
      var d = this.div;
      var p = this.protons;
      var n = this.neutrons;
      d.append("<table style='width:100%;'><tr><td><div class='square_drop'></div></td>" +
        "<td class='instructions'><td><td><div class='scale'></div></td></tr></table>" +
        "<div class='periodic_squares'></div>");

      var square_drop = d.find(".square_drop");
      square_drop.html("<table style='width:100%;height:100%;'><tr><td>?</td></tr></table>")

      var instructions = d.find(".instructions");
      instructions.append("The scale on the right has " + p + " protons and " + n + " neutrons " +
        "on it and reads '" + (p + n) + ".0 amu'. Find the periodic square that matches this " +
        "setup and drop it into the box on the left.<hr />" +
        "<p class='a-center'><button>Check<br/>Answer</button></p>");
      instructions.find("button").button();

      var scale = d.find("div.scale");
      scale.append("<img class='scale' src='/assets/scale.png' />");
      scale.append("<div class='mass'>" + (p + n) + ".0 amu</div>");
      var nc = am2nc2[p + n];
      for (var i = 0; i < p + n; i++) {
        var left = nc[2 * i] + 20;
        var top = nc[2 * i + 1] - 20;
        scale.append("<canvas class='p-absolute " + (i < p ? "proton" : "neutron") + "' width='32px' height='32px'" +
          "style='left:" + left + "px;top:" + top + "px;'></canvas>");
      }
      drawNucleons(d);

      var periodic_squares = d.find(".periodic_squares");
      for (var j = 0; j < 4; j++) {
        var e = answers[this.protons][j];
        var left = 200 * j + 80;
        periodic_squares.append("<canvas i='" + j + "' symbol='" + e.symbol + "' name='" + e.name + "' " +
          "number='" + e.number + "' mass='" + e.mass + "' width='160px' height='160px' " +
          "style='position:absolute;left:" + left + "px;top:240px;' left='" + left + "' top='240'></canvas>");
      }
      var canvi = periodic_squares.find("canvas");
      for (var k = 0; k < canvi.length; k++) {
        var c = $(canvi[k]);
        var element = new Element(c.attr("symbol"),c.attr("name"),c.attr("number"),c.attr("mass"));
        c[0].getContext("2d").drawPeriodicSquare2(element, 0, 0, 160);
        c.mousedown(this, function(event) {
          event.data.startDrag(event);
        });
      }
      var body = $("body");
      body.mousemove(this, function(event) {
        event.data.drag(event);
      });
      body.mouseup(this, function(event) {
        event.data.stopDrag(event);
      });
    },

    startDrag : function(event) {
      this.mouse.down = event;
      this.mouse.target = $(event.target);
      this.mouse.target.css({"z-index":z++});
      this.mouse.target.left = this.mouse.target.position().left;
      this.mouse.target.top = this.mouse.target.position().top;
      $("body").disableSelection();
    },

    drag : function(event) {
      if (!this.mouse.target || !this.mouse.down) {
        return;
      }
      var left = this.mouse.target.left + (event.clientX - this.mouse.down.clientX);
      var top = this.mouse.target.top + (event.clientY - this.mouse.down.clientY);
      if (20 < left) {
        this.mouse.target.css({ left : Math.min(720, left) });
      } else if (left < 720) {
        this.mouse.target.css({ left : Math.max(20, left) }); }
      if (0 < top) {
        this.mouse.target.css({ top : Math.min(240, top) });
      } else if (top < 240) {
        this.mouse.target.css({ top : Math.max(0, top) });
      }
    },

    stopDrag : function(event) {
      if (!this.mouse.target) {
        return;
      }
/*
      alert(mouse.target.position().top);
*/
      event.data.positionSquares(event);
      this.mouse.down = false;
      this.mouse.target = false;
    },

    positionSquares : function(event) {
      var t = this.mouse.target;
      var left = t.position().left;
      var top = t.position().top;
      if (20 <= left && left <= 100 && 0 <= top && top <= 80) {
        this.selected = t.attr("i");
      } else if (this.selected == t.attr("i")) {
        this.selected = null;
      }
      var squares = this.div.find("div.periodic_squares canvas");
      for (var j = 0; j < squares.length; j++) {
        var square = $(squares[j]);
        if (square.attr("i") == this.selected) {
          square.animate({left:60,top:40});
        } else if (square.attr("top") != square.position().top) {
          square.animate({left:square.attr("left"),top:square.attr("top")});
        }
      }
    }
  };

  var tests = [];
  $(document).ready(function () {
    $.each($(".periodic_squares_pre_test"), function (i, n) {
      var test = new PeriodicSquaresPreTest($(n));
      tests.push(test);
      test.start();
    });
  });
</script>
<style>
  div.periodic_squares_pre_test {
    height: 400px;
  }

  div.periodic_squares_pre_test div.square_drop {
    width: 170px;
    height: 170px;
    margin: 15px;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }

  div.periodic_squares_pre_test div.square_drop table tr td {
    color : rgba(0,0,0,0.25);
    font-size: 64px;
    text-align: center;
  }

    /*
      div.periodic_squares_pre_test div.instructions { width : 420px; }
    */

  div.periodic_squares_pre_test div.scale {
    position: relative;
    right: 0;
    top: 0;
    width: 232px;
    height: 200px;
  }

  div.periodic_squares_pre_test div.scale img.scale {
    position: absolute;
    top: 80px;
  }

  div.periodic_squares_pre_test div.scale div.mass {
    position: absolute;
    left: 54px;
    top: 140px;
    width: 90px;
    height: 20px;
    font-size: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 0.75);
  }

  table.periodic_squares { width : 100%; }

</style>
<div id="periodic_squares_pre_test" class="tabs">
  <button id="home" onclick="window.location.href = '/';">Home</button>
  <ul>
    <li><a href="#pre_test">Periodic Squares Pre-Test</a></li>
  </ul>
  <div id="pre_test" class="accordion" style="width:940px;margin:0 auto;">
    <h4><a name="one" href="#one">Periodic Square One</a></h4>

    <div class="periodic_squares_pre_test" protons="2" neutrons="2">
    </div>
    <h4><a name="two" href="#two">Periodic Square Two</a></h4>

    <div class="periodic_squares_pre_test" protons="3" neutrons="4">
    </div>
    <h4><a name="three" href="#three">Periodic Square Three</a></h4>

    <div class="periodic_squares_pre_test" protons="4" neutrons="5">
    </div>
  </div>
</div>
</body>
